
.article-date,
.article-category-link,
.archive-year,
.widget-title {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: @color-gray-text;
  margin-bottom: 1em;
  margin-left: 5px;
  line-height: 1em;
  text-shadow: 0 1px @color-light-text;
  font-weight: bold;
}

.article-inner,
.archive-article-inner {
  border-radius: 1em;
  .box-shadow(1px 2px .5em @color-shadow);
  .border-solid;
  .bg-light;
}

.article-entry,
.widget {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
    color: #000;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
    margin-bottom: 10px;
  }

  h1 {
    font-size: 1.6em;
  }

  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.3em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 1em;
    color: @color-gray-text;
  }

  hr {
    border: 1px dashed @color-border;
  }

  strong {
    font-weight: bold;
  }

  em,
  cite {
    font-style: italic;
  }

  sup,
  sub {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup {
    top: -0.5em;
  }

  sub {
    bottom: -0.2em;
  }

  small {
    font-size: 0.85em;
  }

  acronym,
  abbr {
    border-bottom: 1px dotted;
  }

  ul,
  ol,
  dl {
    margin: 0 8px;
    line-height: 1.6em;
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  dt {
    font-weight: bold;
  }
}


.article {
  margin: 50px 0;
}

.article-inner {
  overflow: hidden;
}

.article-meta {
  zoom: 1;
  .clearfix();
}

.article-date {
  float: left;
}

.article-category {
  float: left;
  line-height: 1em;
  color: #ccc;
  text-shadow: 0 1px @color-light-text;
  margin-left: 8px;

  &:before {
    content: "\2022";
  }
}

.article-category-link {
  margin: 0 12px 1em;
}

.article-header {
  .transition-transform(.3s);
  padding: 0 20px 10px;

  &:hover,
  &:focus {
    .translate3d(1em, 0, 0);
  }
}

.article-title {
  font-weight: bold;
  color: @color-dark-text;

  &:hover {
    text-decoration: none;
  }

  @media (max-width: @screen-phone) {
    font-size: 24px;
  }
}

.article-entry {
  zoom: 1;
  padding: 0 20px;
  border-top: 1px dashed @color-border;
  border-bottom: 1px dashed @color-border;
  .clearfix();

  > p {
    text-indent: 2em;

    &:first-child:first-letter {
      font-size: 2em;
    }
  }

  p,
  table {
    line-height: 1.6em;
    margin: 1.6em 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
    line-height: 1.1em;
    margin: 1.1em 0;
  }

  a {
    .hover-color(darken(@color-link-hover, 10%), @color-light-text);
  }

  ul,
  ol,
  dl {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
  }

  iframe {
    border: none;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }

  th {
    font-weight: bold;
    border-bottom: 3px solid @color-border;
    padding-bottom: 0.5em;
  }

  td {
    border-bottom: @border-solid;
    padding: 10px 0;
  }

  blockquote {
    font-size: 1.4em;
    margin: 1.6em 0 1.6em 2em;
    padding: 0 0.8em;
    border-left: 4px solid @color-border;
    color: @color-gray-text;

    footer {
      font-size: 14px;
      margin: 1.6em 0;

      cite:before {
        content: "—";
        padding: 0 0.5em;
      }
    }
  }

  .fancybox {

    > img {
      border-radius: .6em;

      @media (min-width: @screen-phone) {
        -webkit-transition: -webkit-transform .3s, box-shadow .3s;
        transition: transform .3s, box-shadow .3s;

        &:hover,
        &:focus {
          .transform(rotate3d(0, 0, 1, -2deg) scale(1.04));
          .box-shadow(0 3px 8px darken(@color-shadow, 30%));
        }
      }
    }
  }

  .pullquote {
    text-align: left;
    width: 45%;
    margin: 0;

    &.left {
      margin-left: 0.5em;
      margin-right: 1em;
    }

    &.right {
      margin-right: 0.5em;
      margin-left: 1em;
    }
  }

  .video-container {
    position: relative;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;

    iframe,
    object,
    embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin-top: 0;
    }
  }
}

.article-more-link a {
  display: inline-block;
  line-height: 1em;
  padding: 6px 15px;
  border-radius: 15px;
  background: fade(@bg-dark-fade, 10%);
  text-indent: 0;
  .hover-color(@color-gray-text, @color-light-text);

  &:hover,
  &:focus {
    .transform(translate3d(1em, 0, 0));
    background: @color-link-hover;
  }
}

.article-footer {
  zoom: 1;
  font-size: 0.95em;
  line-height: 1.6em;
  padding-top: 1.6em;
  margin: 0 20px 20px;
  color: @color-gray-text;
  .clearfix();
}

.article-tag-list {
  float: left;
  max-width: 100%;

  &-item {
    float: left;
    margin-right: 10px;
    list-style: none;

    &:before {
      font-family: FontAwesome;
      content: "\f02b";
      padding-right: 8px;
    }
  }

  @media (min-width: @screen-phone) {
    max-width: 50%;
    height: 24px;
    overflow: hidden;
  }
}

.article-tag-list-link
.article-comment-link {
  float: right;
}

@media (min-width: @screen-phone) {
  .article-comment-item,
  .article-tag-list-item {
    .transition-transform(.3s);

    &:hover,
    &:focus {
      .translate3d(0, -4px, 0);
    }
  }
}

#article-nav {
  zoom: 1;
  position: relative;
  .clearfix();

  @media screen and (min-width: @screen-phone) {
    margin: 50px 0;

    &:before {
      width: 8px;
      height: 8px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -4px;
      margin-left: -4px;
      content: "";
      border-radius: 50%;
      .box-shadow(0 1px 2px #fff);
      .bg-light;
    }
  }
}

.article-nav-link-wrap {
  text-decoration: none;
  text-shadow: 0 1px @color-light-text;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 50px;
  text-align: center;
  display: block;
  .hover-color(@color-gray-text, @color-light-text);

  @media screen and (min-width: @screen-phone) {
    width: 50%;
    margin-top: 0;
  }
}
@media screen and (min-width: @screen-phone) {
  #article-nav-newer {
    float: left;
    text-align: right;
    padding-right: 20px;
  }

  #article-nav-older {
    float: right;
    text-align: left;
    padding-left: 20px;
  }
}

.article-nav-caption {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ddd;
  line-height: 1em;
  font-weight: bold;

  #article-nav-newer & {
    margin-right: -2px;
  }
}

.article-nav-title {
  font-size: 0.85em;
  line-height: 1.6em;
  margin-top: 0.5em;
}

.article-gallery {
  background: #000;
  position: relative;

  a {
    background: none;
  }
}

.article-gallery-photos {
  position: relative;
  overflow: hidden;
}

.article-gallery-img {
  display: none;
  max-width: 100%;

  &:first-child {
    display: block;
  }

  &.loaded {
    position: absolute;
    display: block;
  }

  img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
  }
}
